<template>
  <!-- destroyOnClose仅仅是清除了模态框里的dom，但是pagemodal这个组件里的数值没有清楚，导致初始化异常 -->
  <a-modal
    class="choose_url"
    width="1100px"
    :title="pagetitle"
    :visible="pageVisible"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    @cancel="closeModal"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
    <a-table
      rowKey="goodsSpecId"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="pageList"
      :loading="tableLoading"
    ></a-table>
  </a-modal>
</template>

<script>
export default {
  name: "specifiChoose",
  props: {
    pageVisible: {
      type: Boolean,
      default: false,
    },
    pageModelId: {
      type: String,
      default: "",
    },
    pagetitle: {
      type: String,
      default: "选择赠品规格",
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
    tableData: {
      type: Array,
      default: [],
    },
  },
  created() {},
  data() {
    return {
      selectedRowsInfo: {}, // 选中的页面信息
      loading: false,
      confirmLoading: false,
      tableLoading: false,
      pageList: [],
      selectedRowKeys: [],
      pagination: {
        showQuickJumper: true,
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${total}条`,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100", "200"],
      },
      columns: [
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
          customRender: (text, row) => {
            return (
              <div class="product_td">
                <table-img src={row.goodsPicture} />
                <div class="product_name">{text}</div>
              </div>
            );
          },
        },
        {
          title: "商品规格",
          dataIndex: "norm",
          key: "norm",
        },
        {
          title: "商品实际库存数",
          dataIndex: "goodsStock",
          key: "goodsStock",
          align: "center",
        },
        {
          title: "赠品库存数",
          dataIndex: "stock",
          key: "stock",
          align: "center",
        },
        {
          title: "赠品剩余库存数",
          dataIndex: "remainingStock",
          key: "remainingStock",
          align: "center",
        },

        // {
        //   title: "赠品已被使用",
        //   dataIndex: "used",
        //   key: "used",
        // },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          customRender: (text, row) => {
            if (row.remainingStock <= 0) {
              text = "库存不足";
            } else {
              text = "——";
            }
            return text;
          },
        },
      ],
      disableId: [],
    };
  },

  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        type: "radio",
        onChange: this.onSelectChange,
        // getCheckboxProps: (record) => ({
        //   props: { disabled: this.arr.some((item) => item.id === record.id) },
        // }),
        getCheckboxProps: this.getCheckboxProps,
      };
    },
  },

  watch: {
    pageVisible(value) {
      console.log(value, "value");
      if (this.pageModelId != "") {
        this.selectedRowKeys = [this.pageModelId];
      } else {
        this.selectedRowKeys = [];
        // this.selectedRowsInfo = {};
      }
      if (value) {
        this.disableId = [];
        this.tableData.forEach((item) => {
          if (item.prizeType == 3 && item.relationId != this.pageModelId) {
            this.disableId.push(item.relationId);
          }
        });
        // console.log(this.disableId, "9999999999999");
        this.pageList = [];
        this.selectedRowsInfo = this.goodsInfo;
        this.selectedRowsInfo.goodsSpecId = this.pageModelId;
        this.getgiftsList();
      } else {
        this.selectedRowKeys = [];
        this.selectedRowsInfo = {};
      }
    },
  },

  methods: {
    getTimestamp(date) {
      return new Date(date).getTime();
    },
    closeModal() {
      this.$emit("cancel");
    },
    handleSubmit() {
      console.log(this.selectedRowsInfo);
      console.log(this.selectedRowKeys);
      if (this.selectedRowKeys.length > 0 && this.selectedRowsInfo.norm) {
        this.$emit("confirm", this.selectedRowsInfo);
      } else {
        this.$message.warn("请选择商品规格");
      }
    },
    async getgiftsList() {
      this.tableLoading = true;
      console.log(this.goodsInfo);
      let res = await this.$get(
        "goldenhome/gh/lottery/admin_/giving/goodsmanage/query",
        {
          goodsId: this.goodsInfo.goodsId,
          goodsType: this.goodsInfo.goodsType,
        }
      );
      if (res && res.returnCode == 1000) {
        if (res.dataInfo != null) {
          this.pageList = res.dataInfo.specList;
          this.pageList.forEach((item) => {
            item.goodsId = this.goodsInfo.goodsId;
            item.goodsName = this.goodsInfo.goodsName;
            item.goodsPicture = this.goodsInfo.goodsPicture;
            item.goodsType = this.goodsInfo.goodsType;
          });
        }
      }
      this.tableLoading = false;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log("selectedRowKeys changed: ", selectedRows);
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      // 修复已选中当时样式未选中的问题。
      this.pageList.forEach((item) => {
        item.active = false;
      });
      this.$set(this.pageList, this.pageList);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRowsInfo = selectedRows[0];
    },
    getCheckboxProps(record) {
      return {
        props: {
          disabled:
            record.remainingStock <= 0 ||
            this.disableId.some((item) => {
              return record.goodsSpecId === item;
            }),
          // disabled: this.disableId.some((item) => {
          //   return record.id === item;
          // }),
        },
      };
    },
  },
};
</script>

<style lang='less' scoped>
.cardPrice {
  white-space: nowrap;
}
.searchBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.product_td {
  display: flex;
  align-items: center;
  .product_name {
    margin-left: 6px;
  }
}
</style>
